<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="60%"
    @close="close"
  >
    <el-form
      ref="formRef"
      inline
      label-width="140px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="父级Id" prop="parentId">
        <div id="cate_lists" class="xm-select-demo"></div>
      </el-form-item>
      <el-form-item label="name" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="路径" prop="path">
        <el-input v-model="form.path" />
      </el-form-item>
      <el-form-item label="vue文件路径" prop="component">
        <el-input v-model="form.component" />
      </el-form-item>
      <el-form-item label="重定向" prop="redirect">
        <el-input v-model="form.redirect" />
      </el-form-item>
      <el-form-item label="标题" prop="meta.title">
        <el-input v-model="form.meta.title" />
      </el-form-item>
      <el-form-item label="图标">
        <el-popover
          popper-class="icon-selector-popper"
          trigger="hover"
          :width="292"
        >
          <template #reference>
            <el-input v-model="form.meta.icon" />
          </template>
          <vab-icon-selector @handle-icon="handleIcon" />
        </el-popover>
      </el-form-item>
      <el-form-item label="badge">
        <el-input v-model="form.meta.badge" />
      </el-form-item>
      <el-form-item label="dot">
        <el-switch v-model="form.meta.dot" />
      </el-form-item>
      <el-form-item label="隐藏">
        <el-switch v-model="form.meta.hidden" />
      </el-form-item>
      <el-form-item label="始终显示当前节点">
        <el-switch v-model="form.meta.levelHidden" />
      </el-form-item>
      <el-form-item label="自定义svg图标">
        <el-switch v-model="form.meta.isCustomSvg" />
      </el-form-item>
      <el-form-item label="固定">
        <el-switch v-model="form.meta.noClosable" />
      </el-form-item>
      <el-form-item label="无缓存">
        <el-switch v-model="form.meta.noKeepAlive" />
      </el-form-item>
      <el-form-item label="不显示当前标签页">
        <el-switch v-model="form.meta.tabHidden" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script>
  import VabIconSelector from '@/plugins/VabIconSelector'
  import { getTree, doEdit, doAdd } from '@/api/menuManagement'
  import { toRaw } from 'vue'
  import { xmSelect } from '@/utils/xm-select.js'

  // let org_obj

  export default defineComponent({
    name: 'MenuManagementEdit',
    components: { VabIconSelector },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        treeData: [],
        form: {
          ismenu: '',
          meta: {
            title: '',
            icon: 'article-line',
            weigh: '1',
            dot: false,
            hidden: false,
            levelHidden: false,
            isCustomSvg: false,
            noClosable: false,
            noKeepAlive: '',
            tabHidden: false,
            breadcrumbHidden: '',
          },
          parentName: '',
          parentId: '',
        },
        rules: {
          parentId: [
            { required: true, trigger: 'blur', message: '请输入父级id' },
          ],
          name: [{ required: true, trigger: 'blur', message: '请输入name' }],
          path: [{ required: true, trigger: 'blur', message: '请输入path' }],
          component: [
            { required: true, trigger: 'blur', message: '请输入component' },
          ],
          'meta.title': [
            { required: true, trigger: 'blur', message: '请输入标题' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      getTree().then(({ data }) => {
        const { list } = data
        console.log(111, xmSelect)

        console.log(121, list)
        // eslint-disable-next-line no-undef
        xmSelect.render({
          el: '#cate_lists',
          filterable: true,
          toolbar: {
            show: true,
            list: ['CLEAR'],
          },
          autoRow: true,
          name: 'cate_id',
          model: {
            label: {
              type: 'text',
            },
            icon: 'hidden',
          },
          prop: {
            name: 'name',
            value: 'id',
          },
          height: '200px',
          radio: true,
          clickClose: true,
          tree: {
            show: true,
            strict: false,
            expandedKeys: [-1],
          },
          paging: true,
          data() {
            return list
          },
          on: function (data) {},
        })
      })

      const filterMethod = (value) => {
        console.log(111, value)
        const selectedValue = state.form.parentId // 保存当前选中的值
        state.treeData = [...state.treeData].filter((item) =>
          item.title.includes(value)
        )
        state.form.parentId = selectedValue // 恢复之前选中的值
      }

      const handleNodeClick = (node) => {
        const nodes = toRaw(node)
        state.form.parentId = nodes.id
        state.form.parentName = nodes.name
      }

      const handleIcon = (item) => {
        state.form.meta.icon = item
      }
      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = JSON.parse(JSON.stringify(row))
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          meta: {
            icon: '',
          },
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        const postData = state.form.meta
        postData.component = state.form.component
        postData.name = state.form.name
        postData.path = state.form.path
        postData.redirect = state.form.redirect
        postData.pid = state.form.parentId
        postData.ismenu = state.form.ismenu
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const selectedNode = state.treeData.find(
              (item) => item.title === state.form.parentId
            )
            if (selectedNode) {
              postData.parentId = selectedNode.id
            }
            if (state.title == '添加') {
              const { msg } = await doAdd(postData)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
            } else {
              const { msg } = await doEdit(postData)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
            }

            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        handleIcon,
        showEdit,
        close,
        save,
        filterMethod,
        handleNodeClick,
      }
    },
  })
</script>
